<template>
  <div class="sdy-not-found">
    <SdyHeader title="啥都有 ~ 订单" back></SdyHeader>
    <!-- aaa -->
    <van-form @submit="submitHandler">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="姓名"
          label="姓名"
          placeholder="姓名"
        />
        <van-field
          v-model="phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
        />
      </van-cell-group>
      <van-field
        v-model="city"
        is-link
        readonly
        name="picker"
        placeholder="点击选择城市"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">

        <van-area
          title="标题"
          @confirm="onConfirm"
          @cancel="showPicker = false"
          :area-list="areaList" />
      </van-popup>
      <van-cell-group inset>
        <van-field
          v-model="address"
          name="详细地址"
          label="详细地址"
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>


    <!-- 展示订单信息 -->
    <SdyOrderInfo v-if="showInfo" @finish="orderFinishHandler" :info="info" />
    <SdyOrderList v-if="showList" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { areaList } from '@vant/area-data'
import { updateAddressInfoApi } from '@/api/order'
import SdyOrderInfo from './components/SdyOrderInfo.vue'
import SdyOrderList from './components/SdyOrderList.vue'

// 准备表单需要的数据
const username = ref<string>('')
const phone = ref<string>('')
const city = ref<string>('')
const address = ref<string>('')
const showPicker = ref<boolean>(false)
const showInfo = ref<boolean>(false)
const showList = ref<boolean>(false)

// 准备一个信息
const info = ref()
// 城市数据直接写好

const submitHandler = async () => {
  // 准备信息
  info.value = {
    userid: window.localStorage.getItem('user_id') as string,
    name: username.value,
    tel: phone.value,
    province: city.value.split('/')[0],
    city: city.value.split('/')[1],
    county: city.value.split('/')[2],
    addressDetail: address.value,
    time: window.localStorage.getItem('time') as string
  }

  const res = await updateAddressInfoApi(info.value)

  // 当订单信息展示出来
  showInfo.value = true
}

const onConfirm = (info: { name: string, value: string }[]) => {
  console.log('确认选择', info)
  // 把选择到的内容组装成一个完整的字符串
  const str = info.reduce((prev, item) => {
    return prev + '/' + item.name
  }, '').slice(1)
  // 把补充好的内容放在 city 信息内
  city.value = str
  // 关闭 对话框
  showPicker.value = false
}

// 确认订单成功
const orderFinishHandler = () => {
  showInfo.value = false
  showList.value = true
}

// 采集订单所需的信息

// 采集完毕以后, 填充到指定位置

// 确认订单信息

// 查看所有订单
</script>

<style scoped lang="scss"></style>
